<template>
  <div class="drop-down" tabindex="0" @blur="onContentBlur">
    <div class="drop-down-title" @click="toggleDropDown">
      <i class="icon-app" :class="['icon-'+icon]"></i>
      <span class="drop-down-cur">{{title}}</span>
      <i class="icon-down-up" :class="[isDown?'icon-up':'icon-down']"></i></div>
    <div class="drop-down-content"  v-show="isDown" ref="drop">
      <slot >
        数据尚未加载完成!
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "drop-down",
    data(){
      return {
        isDown:false
      }
    },
    methods:{
      onContentBlur(){
        setTimeout(() => {
          const content = this.$refs.drop;
          const activeNode = document.activeElement;
          if(content.contains(activeNode)) return;
          this.isDown = false;
        },0)
      },
      toggleDropDown() {
        this.isDown = !this.isDown;
      },
    },
    props:{
      innerFocus:{
        type:Boolean,
        default:false
      },
      icon:{
        type:String,
        required:true
      },
      title:{
        type:String,
        required:true
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/scss/const";
  @import "../../common/scss/func";
  .middle{
    vertical-align: middle;
  }
  .drop-down{
    outline:none;
    position:relative;
    border:1px solid $color-border;
    display:inline-block;
    background: $color-bg-component;
    .drop-down-title{
      height:30px;
      line-height:30px;
      color:$color-subtitle;
      cursor:pointer;
      padding:0 10px 0 10px;
      font-size:0;
      .drop-down-cur{
        font-size:$ft-droptitle-1366;
        padding:0 10px;
        vertical-align: middle;
      }
      .icon-app{
        display:inline-block;
        vertical-align: middle;
      }
      .icon-car{
        @include bg-img-center(16px,13px,'./images/car@1x.png');
      }
      .icon-map{
        @include bg-img-center(14px,16px,'./images/map@1x.png');
      }
      .icon-down-up{
        display:inline-block;
        vertical-align: middle;
      }
      .icon-down{
        @include bg-img-center(16px,7px,'./images/down@2x.png')
      }
      .icon-up{
        @include bg-img-center(16px,7px,'./images/up@2x.png')
      }
    }
    .drop-down-content{
      position:absolute;
      left:0;
      top:42px;
      min-width:100%;
      z-index: 100;
    }
  }
  @media (min-width:1900px) {
    .drop-down{
      .drop-down-title{
        height:40px;
        line-height:40px;
        padding:0 19px 0 9px;
        font-size:0;
        .drop-down-cur{
          font-size:$ft-droptitle-1920;
          padding:0 10px;
        }
        .icon-car{
          @include bg-img-center(27px,17px,'./images/car@2x.png');
        }
        .icon-map{
          @include bg-img-center(19px,22px,'./images/map@2x.png');
        }
        .icon-down{
          @include bg-img-center(16px,7px,'./images/down@2x.png')
        }
        .icon-up{
          @include bg-img-center(16px,7px,'./images/up@2x.png')
        }
      }
      .drop-down-content{
        position:absolute;
        left:0;
        top:52px;
      }
    }
  }
</style>
